<template>
	<view class="">
		<view class="content">
			<view class="fixed-box"  :class="scrollTop>30?'bgWhite':''" >
				<view class="sys-head" view :style="{ height: statusBarHeight+'px' }"></view>
				<view class="header-title"  style="color:#333" >
					<view class="head-wrapper" :style="'top:'+statusBarHeight+'px'">
					</view>
					<view class="title">车悦融</view>
					<view class="subtitle">有车即可申请</view>
				</view>
			</view>
			<view class="mains" :style="{ paddingTop: (43+statusBarHeight)+'px' }">
				<view class="apply-box">
					<view class="title">最高可借额度 (元)</view>
					<view class="number">1,000,000</view>
					<view class="desc">综合年化利率<text>6%至24%</text>，期限最长5年，具体以审批为准</view>
					<view class="apply">
						<view class="titles">申请即可享以下三大特权</view>
						<view class="flex-align-center" style="padding:0 68rpx;" >
							<view class="items">
								<image src="../../static/index1.png" mode=""></image>
							</view>
							<image src="../../static/line.png" class="line" mode=""></image>
							<view class="items">
								<image src="../../static/index2.png" mode=""></image>
							</view>
							<image src="../../static/line.png" class="line" mode=""></image>
							<view class="items">
								<image src="../../static/index3.png" mode=""></image>
							</view>
						</view>
						<view class="flex-align-center bottomText">
							<view>不押车</view>
							<view>车照开</view>
							<view>持牌银行</view>
						</view>
					</view>
					<view class="applyNow flex-aj-center" @click="onNav('/pages/submitCarInfo/index')" >立即申请</view>
				</view>
				<view class="swiper_box" @click="onNav('/pages/submitCarInfo/index')" >
					<swiper @change="swiperChange" autoplay >
						<swiper-item>
							<image src="@/static/swiper-bg1.png" mode=""></image>
						</swiper-item>
						<swiper-item>
							<image src="@/static/swiper-bg2.png" mode=""></image>
						</swiper-item>
						<swiper-item>
							<image src="@/static/swiper-bg3.png" mode=""></image>
						</swiper-item>
					</swiper>
					<view class="dots flex-aj-center">
						<view class="dot-item" v-for="(item,index) in 3" :key="index" :class="current==index?'active':''" ></view>
					</view>
				</view>
				<view class="applyAttention">
					<view class="flex-aj-center title">
						<view class="left"></view>
						<view class="">申请需知</view>
						<view class="right"></view>
					</view>
					<view class="desc">
						浙江易顺融资担保有限公司竭诚为您提供优质的车辆融资服务，帮助您从银行等持牌金融机构获得融资。您在融资申请过程中，如您对融资金额，费率，合同等条款有任何异议的，请您中止相关操作。同时，您也可自行向银行等金融机构申请融资。
					</view>
				</view>
				<view class="partner">
					<view class="flex-aj-center title">
						<view class="left"></view>
						<view class="">合作伙伴</view>
						<view class="right"></view>
					</view>
					<view class="flex-align-center bottom">
						<view>
							<image src="../../static/partner1.png" mode=""></image>
							<view>浙商银行</view>
						</view>
						<view>
							<image src="../../static/partner2.png" mode=""></image>
							<view>上海华瑞银行</view>
						</view>
						<view>
							<image src="../../static/partner3.png" mode=""></image>
							<view>云连通</view>
						</view>
					</view>
				</view>
				<view class="kefu flex-aj-center" @click="showModal = true" >
					专属客服
				</view>
				<view class="tips">
					<view class="">车悦融</view>
					<view class="">贷款有风险，借款需谨慎。</view>
					<view class="">贷款额度，放款时间，通过率等以实际审批为准</view>
				</view>
				<!-- <view class="assess_box">
					<view class="item" @click="onNav('/pages/submitCarRed/index')">
						<image src="../../static/money_img.png" />
						<view>额度评估</view>
					</view>
					<view class="item" @click="onNav('/pages/submitCarInfo/index')">
						<image src="../../static/car_img.png" />
						<view>爱车评估</view>
					</view>
				</view>
				<view class="flow_box card">
					<view class="flow_title">
						<image class="line" src="../../static/left_img.png"></image>
						<view>评估流程</view>
						<image class="line" src="../../static/right_img.png"></image>
					</view>
					<view class="flow_content">
						<view class="item">
							<image src="../../static/submit_icon.png"></image>
							<view>提交信息</view>
						</view>
						<image class="process_icon" src="../../static/process_icon.png"></image>
						<view class="item">
							<image src="../../static/await_icon.png"></image>
							<view>等待客服联系</view>
						</view>
						<image class="process_icon" src="../../static/process_icon.png"></image>
						<view class="item">
							<image src="../../static/deal_icon.png"></image>
							<view>交易成功</view>
						</view>
					</view>
				</view>
				<view class="headline_box">
					<view class="headline_title">
						<view class="left">悦融头条</view>
						<view class="right" @click="onNav('/pages/headlines/index')">
							<view>查看全部</view>
							<uni-icons type="right" size="16" color="#999"></uni-icons>
						</view>
					</view>
					<view class="headline_content">
						<view class="card" v-for="(item,index) in list" :key="index">
							<view class="items" @click="onNav(`/pages/headlineDetails/index?id=${item.cyrappNewsId}`)">
								<image class="left_img" :src="item.headImg"></image>
								<view class="right_box">
									<view class="text">{{item.title}}</view>
									<view class="read_count">
										<view >{{item.author}}</view>
										<view >阅 {{index+1*3}}</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view> -->
			</view>
			<view class="modal" v-if="showModal">
				<view class="mian">
					<view class="head_top">
						<view class="left_box">
							<view>客服电话</view>
							<uni-icons @click="showModal = false" type="closeempty" size="24"></uni-icons>
						</view>
						<view class="time">工作日 10:00-18:00</view>
					</view>
					<view class="center" style="font-size: 50rpx;">
						15156269848（微信同号）
					</view>
					<view class="btn" @click="makePhone" >
						立即拨打电话
					</view>
				</view>
			</view>
		</view>
		<TabBer currentPath="/pages/index/index" />
	</view>
	
</template>

<script>
	import {
		getArticle,
		getArticleDetail
	} from '../../api/article';
	import {
		bindToken
	} from '../../utils/request';
	export default {
		data() {
			return {
				showModal:false,
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
				headOpacity:0,
				current:0,
				scrollTop: 0,
				paginatin: {
					pageNum: 1,
					pageSize: 15,
				},
				list: [],
				total: 0,
				isLoginStatus: false
			}
		},
		async onShow() {
			const data = await bindToken('getToken');
			if (Object.values(data).length) this.isLoginStatus = true;
			console.log("测试数据",Object.values(data).length,this.isLoginStatus)
		},
		onLoad() {
			this.getList();
		},
		onPageScroll({
			scrollTop
		}) {
			this.scrollTop = scrollTop;
		},
		methods: {
			makePhone(){
				let that = this;
				uni.makePhoneCall({
					phoneNumber:'15156269848',
					complete() {
						that.showModal = false
					}
				})
			},
			swiperChange(e){
				this.current = e.detail.current
			},
			async getList() {
				const values = this.paginatin;
				const {
					data
				} = await getArticle(values);
				this.list = data.records;
			},
			onNav(url) {
				if (this.isLoginStatus) {
					uni.navigateTo({
						url
					})
				} else {
					uni.navigateTo({
						url: '/pages/login/index'
					})
				}

			}
		}
	}
</script>
<style>
	page {
		background: #F5F9FF;
	}
</style>

<style lang="less" scoped>
	@import './index.less';
	
	@font-face {
		font-family: 'D';
		src: url('@/static/D-DINExp-Bold.ttf') format('truetype');
		font-display: swap;
	}
	
	.apply{
		margin-top: 48rpx;
		background: linear-gradient( 180deg, rgba(255,157,71,0.16) 0%, rgba(255,157,71,0) 100%);
		border-radius: 16rpx 16rpx 0rpx 0rpx;
		padding: 32rpx 24rpx 80rpx;
		margin-bottom: 24rpx;
		.titles{
			font-family: PingFangSC;
			font-weight: 500;
			font-size: 24rpx;
			color: #8F6D56;
			margin-bottom: 48rpx;
		}
		.line{
			width: 92rpx;
			height: 2rpx;
			margin:0 28rpx;
		}
		.items{
			image{
				width: 56rpx;
				height: 56rpx;
			}
		}
		.bottomText{
			view{
				width: 190rpx;
				height: 24rpx;
				font-family: PingFangSC;
				font-weight: 500;
				font-size: 24rpx;
				color: #8F5128;
				text-align: center;
				margin-right: 18rpx;
				&:last-child{
					margin-right: 0;
				}
			}
		}
	}
	
	.applyAttention{
		width: 654rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		margin-top: 24rpx;
		padding: 32rpx 24rpx 24rpx;
		.title{
			width: 654rpx;
			margin-bottom: 24rpx;
			.left,.right{
				width: 96rpx;
				height: 4rpx;
				background: linear-gradient( 90deg, rgba(51,133,255,0.24) 0%, rgba(51,133,255,0) 100%);
			}
			.right{
				background: linear-gradient( 90deg, rgba(51,133,255,0.24) 0%, rgba(51,133,255,0) 100%);
			}
			view{
				font-family: PingFangSC;
				font-weight: 500;
				font-size: 32rpx;
				color: #292929;
				margin: 0 16rpx;
			}
		}
		.desc{
			width: 654rpx;
			font-family: PingFangSC;
			font-weight: 400;
			font-size: 28rpx;
			color: #666666;
			line-height: 44rpx;
			text-align: justify;
			font-style: normal;
		}
	}
	
	.partner{
		width: fit-content;
		background: #FFFFFF;
		border-radius: 24rpx;
		margin-top: 24rpx;
		.title{
			width: 100%;
			height: 88rpx;
			background-image: url(../../static/partner.png);
			background-size: cover;
			.left,.right{
				width: 96rpx;
				height: 4rpx;
				background: linear-gradient( 90deg, rgba(255,132,51,0.24) 0%, rgba(255,132,51,0) 100%);
			}
			view{
				font-family: PingFangSC;
				font-weight: 500;
				font-size: 32rpx;
				color: #1F1F1F;
				margin: 0 16rpx;
			}
		}
		.bottom{
			padding: 8rpx 24rpx 32rpx;
			>view{
				width: 202rpx;
				text-align: center;
				margin-right: 24rpx;
				&:last-child{
					margin-right: 0;
				}
				image{
					width: 72rpx;
					height: 72rpx;
					margin-bottom: 16rpx;
				}
				view{
					font-family: PingFangSC;
					font-weight: 400;
					font-size: 24rpx;
					color: #1F1F1F;
				}
			}
		}
	}
	
	.apply-box{
		width: fit-content;
		background: #FFFFFF;
		border-radius: 24rpx;
		text-align: center;
		padding: 48rpx 24rpx 0;
		margin-bottom: 24rpx;
		.applyNow{
			width: 100%;
			height: 96rpx;
			background: linear-gradient( 135deg, #FF8533 0%, #FF0011 100%);
			border-radius: 42rpx;
			font-family: PingFangSC;
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
			position: relative;
			top: -48rpx;
		}
		.title{
			font-family: PingFangSC;
			font-weight: 400;
			font-size: 24rpx;
			color: #666666;
			margin-bottom: 24rpx;
		}
		.number{
			height: 104rpx;
			font-family: D;
			font-weight: normal;
			font-size: 104rpx;
			color: #292929;
			line-height: 104rpx;
			margin-bottom: 24rpx;
		}
		.desc{
			font-family: PingFangSC;
			font-weight: 400;
			font-size: 24rpx;
			color: #999999;
			line-height: 24rpx;
			text{
				color: #3385FF;
			}
		}
	}
	
	.kefu{
		margin: 48rpx auto 0;
		width: 208rpx;
		height: 76rpx;
		background: linear-gradient( 180deg, #EBF3FF 0%, #F5F9FF 100%);
		border-radius: 38rpx;
		border: 2rpx solid #FFFFFF;
		font-family: PingFangSC;
		font-weight: 500;
		font-size: 28rpx;
		color: #3385FF;
	}
	.tips{
		width: 702rpx;
		margin-top: 24rpx;
		text-align: center;
		:first-child{
			font-family: PingFangSC;
			font-weight: 500;
			font-size: 32rpx;
			color: #C5D0E0;
		}
		:nth-child(2),:nth-child(3){
			font-family: PingFangSC;
			font-weight: 400;
			font-size: 24rpx;
			color: #C5D0E0;
			margin-top: 24rpx;
		}
	}
	
	.fixed-box {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 99;
		
		
	
		.header-title {
			height: 43px;
			display: flex;
			align-items: center;
			padding-left: 24rpx;
			
			.title{
				font-family: PingFangSC;
				font-weight: 500;
				font-size: 36rpx;
				color: #FFFFFF;
			}
			
			.subtitle{
				font-family: PingFangSC;
				font-weight: 400;
				font-size: 28rpx;
				color: rgba(255,255,255,0.72);
				padding-left: 16rpx;
			}
	
			.head-wrapper {
				z-index: 999;
				display: flex;
				align-items: center;
				position: fixed;
				left: 30rpx;
				top: 0;
				/* #ifdef MP */
				height: 43px;
				/* #endif */
				/* #ifdef H5 */
				height: 114rpx;
	
				/* #endif */
				.head-menu {
					display: flex;
					align-items: center;
					height: 54rpx;
					width: 140rpx;
					border-radius: 27rpx;
	
					.iconfont {
						flex: 1;
						text-align: left;
						color: #333;
						box-sizing: border-box;
					}
				}
			}
		}
		&.bgWhite{
			background-color: #fff;
			.title{
				color: #333;
			}
			
			.header-title{
				justify-content: center;
			}
			
			.subtitle{
				display: none;
			}
		}
	}
	.swiper_box {
		width: 702rpx;
		height: 248rpx;
		border-radius: 16rpx;
		position: relative;
		image{
			width: 100%;
			height: 248rpx;
			border-radius: 16rpx;
		}
		.dots{
			position: absolute;
			z-index: 10;
			bottom: 16rpx;
			width: 100%;
			height: 8rpx;
			.dot-item{
				width: 8rpx;
				height: 8rpx;
				background: rgba(0,0,0,0.4);
				border-radius: 50%;
				margin-right: 8rpx;
			}
			.active{
				background: #FFFFFF;
			}
		}
	}
</style>